<template>
    <div class="layout">
        <div class="box white-block" v-loading="loading">
            <div class="application">
                <div class="head-line">申请栏
                    <div class="btn">
                        <el-button @click="del" size="small">删除</el-button>
                    </div>
                </div>
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :selection="true"
                               class="mt20 table" @selectionChange="selectionChange">
                    <template slot="name" slot-scope="scope">
                        <el-image :src="scope.row.icon" class="logo"></el-image>
                        <span>{{scope.row.resName}}</span>
                    </template>
                    <template slot="resState" slot-scope="scope">
                        <span v-if="scope.row.resState==1">正常</span>
                        <span v-else-if="scope.row.resState==2" class="error">异常</span>
                    </template>
                </table-example>
                <div class="text-center mt30">
                    <el-button type="primary vast s-btn" @click="submit" size="small">提交</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'resName',
                        label: '名称',
                        minWidth: '10%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resSourceDept',
                        label: '提供单位',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'resState',
                        label: '状态',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                slotColumns: ['resState'],
                delId: [],
                list: [],
                state: [],
                submitList: [],
                checked: false,
                idList: [],
                loading: false
            }
        },
        mounted() {
            this.getData()
        },
        update() {
        },
        methods: {
            getData() {
                this.tableData = []
                this.loading = true
                this.$http.get('/rdResourceApplicationDetail/selectApplyCars').then(result => {
                    if (result.success) {
                        this.loading = false
                        if (result.data.records) {
                            for (var i = 0; i < result.data.records.length; i++) {
                                let list = result.data.records[i]
                                if (list.state === 2) {
                                    list.disabled = true
                                }
                                list.itemId = list.id
                                this.tableData.push({orderId: result.data.records[i].id, ...result.data.records[i]})
                            }
                        }
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            selectionChange(val) {
                this.delId = val
                this.idList = []
                for (let i = 0; i < val.length; i++) {
                    this.idList.push(val[i].id)
                }
            },
            del() {
                for (var i = 0; i < this.delId.length; i++) {
                    this.list.push(this.delId[i].id)
                }
                this.$http.post('/rdResourceApplicationDetail/delById?checked=true', {
                    idList: this.list.join(',')
                }).then(result => {
                    if (result.success) {
                        this.$message.success({
                            message: '删除成功',
                            showClose: true
                        })
                        this.getData()
                    }
                })
            },
            submit() {
                if (this.idList.length > 0) {
                    this.$http.post('/rdResourceApplicationDetail/selectApplyResIdList', {
                        idList: this.idList
                    }).then(result => {
                        if (result.success) {
                            this.$router.push({
                                path: '/res/submit',
                                query: {
                                    idList: this.idList.join(','),
                                    formCart: true
                                }
                            })
                        }
                    })
                } else {
                    this.$message.warning({
                        message: '请选择资源',
                        showClose: true
                    })
                }
            }
        },

        components: {
            tableExample
        }
    }
</script>
<style scoped lang="less">
    .box {
        .application {
            margin-left: 80px;
            margin-right: 80px;

            p {
                float: left;
                padding: 12px 0;
                padding-left: 14px;
                font-size: 18px;
                position: relative;
                padding-bottom: 30px;
            }

            p::after {
                content: "";
                position: absolute;
                top: 12px;
                left: 0;
                width: 6px;
                height: 20px;
                background-color: #4995F4;
            }

            .btn {
                height: 34px;
                float: right;
            }

            .logo {
                width: 50px;
                height: 22px;
                float: left;
                /*background-color: pink;*/
            }
        }
    }
</style>
